<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康信息收集</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .input-group {
            margin-bottom: 16px;
        }
        .input-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        .input-group input[type="text"],
        .input-group input[type="number"],
        .input-group input[type="date"],
        .input-group input[type="time"],
        .input-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .submit-btn {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .submit-btn:hover {
            background-color: #4cae4c;
        }
        .set-record-time-btn {
            display: block;
            width: 50%;
            padding: 6px;
            background-color: #5cb85c;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
    </style>
</head>
<body>
<h1>健康信息收集</h1>
<div class="container">
    <button class="set-record-time-btn" onclick="setCurrentTime()">设置为当前时间</button>
    <div class="input-group">
        <label for="measurement_date">测量日期：</label>
        <input type="date" id="measurement_date" required>
    </div>

    <div class="input-group">
        <label for="measurement_time">测量时间：</label>
        <input type="time" id="measurement_time" required>
    </div>

    <div class="input-group">
        <label for="blood_pressure_high">血压（高）mmHg：</label>
        <input type="number" id="blood_pressure_high" required>
    </div>

    <div class="input-group">
        <label for="blood_pressure_low">血压（低）mmHg：</label>
        <input type="number" id="blood_pressure_low" required>
    </div>

    <div class="input-group">
        <label for="blood_sugar">血糖（mg/dL 或 mmol/L）：</label>
        <input type="text" id="blood_sugar" required>
    </div>

    <div class="input-group">
        <label for="heart_rate">心率（次/分钟）：</label>
        <input type="number" id="heart_rate" required>
    </div>
    <button class="submit-btn" onclick="submitData()">提交</button>
    <br>
    <button class="submit-btn" onclick="pageToIndex()">展示页</button>
</div>
</body>
</html>
<script>

    let limit = false;

    const setCurrentTime = () => {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        let month = currentDate.getMonth() + 1; // 月份是从 0 开始计数的，因此要加1
        let day = currentDate.getDate();
        let hours = currentDate.getHours();
        let minutes = currentDate.getMinutes();

        day = setPreZero(day);
        month = setPreZero(month);
        hours = setPreZero(hours);
        minutes = setPreZero(minutes);

        const date = `${year}-${month}-${day}`;
        const time = `${hours}:${minutes}`;
        console.log(date, time)
        document.getElementById('measurement_date').value = date;
        document.getElementById('measurement_time').value = time;
    };

    const submitData = () => {
        if (limit) {
            return;
        }
        let blood_pressure_high = document.getElementById('blood_pressure_high').value;
        let blood_pressure_low = document.getElementById('blood_pressure_low').value;
        let blood_sugar = document.getElementById('blood_sugar').value;
        let heart_rate = document.getElementById('heart_rate').value;
        let measurement_date = document.getElementById('measurement_date').value;
        let measurement_time = document.getElementById('measurement_time').value;
        console.log(blood_pressure_high, blood_pressure_low, blood_sugar, heart_rate, measurement_date, measurement_time)
        if (! blood_pressure_high && ! blood_pressure_low && ! blood_sugar) {
            alert('Cant Empty');
            return;
        }
        if (! blood_sugar) {
            blood_sugar = 0;
        }
        if (! blood_pressure_high) {
            blood_pressure_high = 0;
        }
        if (! blood_pressure_low) {
            blood_pressure_low = 0;
        }
        if (! heart_rate) {
            heart_rate = 0;
        }
        const record_time = measurement_date + ' ' + measurement_time + ':00';
        let queryStr = `?name=王国栋&blood_pressure_high=${blood_pressure_high}&blood_pressure_low=${blood_pressure_low}&blood_sugar=${blood_sugar}&heart_rate=${heart_rate}&record_time=${record_time}`;
        console.log(queryStr)
        queryStr = encodeURI(queryStr);
        limit = true;
        fetch(`http://finder.lyhsnd.cn/record_health${queryStr}`)
            .then(response => response.json())
            .then(data => console.log(data))
            .then(() => {
                document.getElementById('blood_pressure_high').value = '';
                document.getElementById('blood_pressure_low').value = '';
                document.getElementById('blood_sugar').value = '';
                document.getElementById('heart_rate').value = '';
                document.getElementById('measurement_date').value = '';
                document.getElementById('measurement_time').value = '';
                alert('Set Record Successfully');
                limit = false;
            })
    };

    const pageToIndex = () => {
        window.location = './index.html';
    };

    const setPreZero = (value) => {
        if (value > 9) {
            return value;
        }
        return '0' + value;
    }
</script>